<!--绘制围栏页 GeofenceView.vue-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">新建围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="router.push('/geofence')">返回</el-button>
  </div>
<!--  创建一个div充当地图容器-->
  <div id="mapContainer" style="width: 100%;height: 84vh;"></div>
<!--  创建新建围栏弹窗-->
  <el-dialog title="新建围栏" v-model="dialogVisible">
    <el-form label-position="top">
      <el-form-item label="围栏名称">
        <el-input placeholder="请输入围栏名称" v-model="geofence.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog" >取消</el-button>
      <el-button type="primary" @click="saveGeofence">确定</el-button>
    </template>
  </el-dialog>

</template>
<script setup>
  import router from "@/router";
  import {nextTick, onMounted, ref} from "vue";
  import { DrawScene, DrawControl,OperateEventType } from 'bmap-draw';
  import {ElMessage} from "element-plus";
  import axios from "axios";
  import qs from "qs";

  //7.准备一个保存围栏数据的对象
 const geofence = ref({
   name:'',//围栏名称
   position:{}//围栏位置数据，注意：它也是一个对象
 })

 //定义全局变量，用来保存地图对象
  var map;

//一进入页面立即加载地图
  onMounted(()=>{
    //表示DOM渲染完毕后立即执行的方法
    // 1.因为我们要确保上面的地图容器div创建成功，才能创建地图对象
    nextTick(()=>{
      //2.创建地图对象，不需要导包
      //外面申明map ，里面给map赋值
     map = new BMapGL.Map("mapContainer");
    //3.设置地图中心点，此处是天安门的金纬度
    let point = new BMapGL.Point(114.3997,30.5111 );
    //4.设置地图对象的中心点和缩放级别

    map.centerAndZoom(point, 15);

      //5. 添加鼠标绘制控件
      //5.1 创建鼠标绘制场景类，这个类是其他绘制功能的基类，负责事件的监听与覆盖的存取
      const scene = new DrawScene(map);
      //5.2 创建绘制控件对象，创建时需要传入绘制场景对象与它自己的配置对象
      const drawContrl = new DrawControl(scene, {
        //5.3 配置了：不显示用途提示+定位在右上角+可绘制圆形和矩形
        enableTips: false,
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        drawingItems: [
          'circle',
          'rectangle'
        ]
      });
      //6.监听绘制完成的事件，获取触发完成事件的目标对象
      scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
        //9 只要用户绘制完成，就会触发弹窗输入围栏名称
        dialogVisible.value=true;
        //event是完成事件的返回值，DOM中所有事件对象都基于Event对象
        //event。target 用于获取当前触发完成事件的围栏元素
        console.log(event.target);

      /**
       * 8.获取围栏位置数据
       * 8.1 获取目标对象中的覆盖物
       */
      let overlay = event.target.overlay;
      //8.2 判断是圆的还是方的，分别处理
      if (overlay instanceof BMapGL.Circle){//圆形
        geofence.value.position.type='circle'; //围栏类型为圆形
        geofence.value.position.longitude=overlay.getCenter().lng;//圆心经度
        geofence.value.position.latitude=overlay.getCenter().lat;//圆心纬度
        geofence.value.position.radius=overlay.getRadius();//半径
        console.log(geofence.value);
      }else {
        //8.4 设置围栏类型为矩形
        geofence.value.position.type='rectangle';
        //8.5 准备数组用来存放矩形围栏的4个点
        let recPoints=[];
        //8.6 循环4次，依次将每个点的金纬度保存到数组中
        for(let i = 0;i < 4;i++){
          recPoints.push(overlay.points[i].latLng.lng+'-'
              +overlay.points[i].latLng.lat);
        }
        geofence.value.recPoints = recPoints.join(',');
        console.log(geofence.value);
      }
      })

      //5.4 将绘制控件对象添加到地图对象中
      map.addControl(drawContrl);
    })
  })

  //定义保存用户点击新建围栏按钮时，弹窗是否打开
  const dialogVisible=ref(false);

//定义关闭弹窗的方法
const closeDialog = ()=>{
    if (confirm('确定要取消新增围栏吗？')){
      //注意 position是一个对象，不能清空，只能清空里面的数据
      geofence.value={name:'',position:{}};//清空围栏数组数据
      map.clearOverlays(); //清除地图上不要的围栏覆盖物
      dialogVisible.value=false;//关闭弹窗
    }
}
//定义保存围栏的方法
const saveGeofence = () =>{
  if (!geofence.value.name || geofence.value.name.trim()==''){
    ElMessage.error('请填写围栏名称！');
    return;
  }
  geofence.value.position = JSON.stringify(geofence.value.position);
  let data = qs.stringify(geofence.value);
  axios.post(BASE_URL+'/v1/geofence/save',data)
      .then((response)=>{
        if (response.data.code===2000){
          ElMessage.success('添加完成');
          dialogVisible.value=false;
          router.push('/geofence');
        }else {
          ElMessage.error(response.data.message);
        }
      })



}






</script>


<style scoped>

</style>
